import * as THREE from 'three'
import {LineGeometry} from 'three/examples/jsm/lines/LineGeometry'
import {LineMaterial} from 'three/examples/jsm/lines/LineMaterial'
import {Line2} from 'three/examples/jsm/lines/Line2'

export function createLine(positions, color = [.3, .85, .6]) {
  const geo = new THREE.BufferGeometry()
  geo.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3))

  const colors = []
  new Array(positions.length / 3).fill(0).forEach(() => {
    colors.push(...color)
  })

  geo.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3))
  const matLineBasic = new THREE.LineBasicMaterial({vertexColors: true, scale: 10, linewidth: 100})
  return new THREE.Line(geo, matLineBasic)
}

export function createLine2(positions, color = '#54E5B5', linewidth = 3) {
  const geometry = new LineGeometry()
  geometry.setPositions(positions)
  const material = new LineMaterial({color, linewidth})
// 把渲染窗口尺寸分辨率传值给材质LineMaterial的resolution属性
// resolution属性值会在着色器代码中参与计算
  material.resolution.set(window.innerWidth, window.innerHeight)
  return new Line2(geometry, material)
}
